<!-- 引用自 https://github.com/layui/layui/issues/1815 -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./assets/dist/css/layui.css"
      href2="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.6/css/layui.css"
    />
  </head>

  <body>
    <table
      class="layui-table"
      id="MianTable"
      lay-filter="MianTable"
      lay-data="{id: 'MianTable'}"
    ></table>
    <script type="text/html" id="toolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="AddRowButton">
          新增主件
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="InitTableButton">
          初始化数据
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="SubmitButton">
          保存
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="expandAll-true">
          expandAll-true
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="expandAll-false">
          expandAll-false
        </button>
      </div>
    </script>
    <script type="text/html" id="TableItemTools">
      <div class="layui-btn-container">
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild"
          >新增子件</a
        >
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delChild"
          >删除</a
        >
      </div>
    </script>
    <script type="text/html" id="TableItemTools">
      <div class="layui-btn-container">
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild"
          >新增子件</a
        >
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delChild"
          >删除</a
        >
      </div>
    </script>

    <script type="text/html" id="sexTpl">
      <select name="select-sex" class="layui-border select-sex" lay-ignore lay-filter="sex_{{d.rowid}}" id="sex_{{d.rowid}}">
        <option value="">请选择</option>
        <option value="男" {{d.sex=="男"?"selected":""}}>男</option>
        <option value="女" {{d.sex=="女"?"selected":""}}>女</option>
      </select>
    </script>
    <script type="text/html" id="provinceTpl">
      <select name="select-province" class="layui-border select-province" lay-ignore lay-filter="province_{{d.rowid}}" id="province_{{d.rowid}}">
        <option value="">请选择</option>
        {{# layui.each(d.provinceList, function(i, v){ }}
          <option value="{{v.id}}" {{d.province==v.id?"selected":""}}>{{v.name}}</option>
          {{# }); }}
      </select>
    </script>
    <script type="text/html" id="cityTpl">
      <select name="select-city" class="layui-border select-city" lay-ignore lay-filter="city_{{d.rowid}}" id="city_{{d.rowid}}">
        <option value="">请选择</option>
        {{# layui.each(d.cityList, function(i, v){ }}
          <option value="{{v.id}}" {{d.city==v.id?"selected":""}}>{{v.name}}</option>
          {{# }); }}
      </select>
    </script>
    <script type="text/html" id="districtTpl">
      <select name="select-district" class="layui-border select-district" lay-ignore lay-filter="district_{{d.rowid}}" id="district_{{d.rowid}}">
        <option value="">请选择</option>
        {{# layui.each(d.districtList, function(i, v){ }}
          <option value="{{v.id}}" {{d.district==v.id?"selected":""}}>{{v.name}}</option>
          {{# }); }}
      </select>
    </script>
    <script
      src="./assets/dist/layui.js"
      src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.9/layui.js"
    ></script>
    <script>
      layui.use(['jquery', 'treeTable', 'form'], () => {
        var $ = layui.jquery;
        var table = layui.table;
        var treeTable = layui.treeTable;
        var form = layui.form;

        var provinceList = [
          { id: '01', name: '湖北省' },
          { id: '02', name: '湖南省' },
          { id: '03', name: '广东省' },
        ];
        var cityList = [
          { id: '01.01', name: '武汉市' },
          { id: '01.02', name: '黄石市' },

          { id: '02.01', name: '长沙市' },
          { id: '02.02', name: '株洲市' },

          { id: '03.01', name: '广州市' },
        ];
        var districtList = [
          { id: '01.01.01', name: '江岸区' },
          { id: '01.01.02', name: '江汉区' },
          { id: '01.01.03', name: '武昌区' },
          { id: '01.02.01', name: '下陆区' },
          { id: '01.02.02', name: '铁山区' },

          { id: '02.01.01', name: '天心区' },
          { id: '02.01.02', name: '芙蓉区' },
          { id: '02.01.03', name: '浏阳市' },
          { id: '02.02.01', name: '天元区' },
          { id: '02.02.02', name: '石峰区' },

          { id: '03.01.01', name: '越秀区' },
          { id: '03.01.02', name: '海珠区' },
        ];

        var isHtmlIcon = false;
        var genIcon = (str, isHtml) => (isHtml ? normalizedIcon(str) : str);
        var icons = {
          flexIconClose: genIcon('layui-icon layui-icon-addition', isHtmlIcon),
          flexIconOpen: genIcon(
            'layui-icon layui-icon-subtraction',
            isHtmlIcon,
          ),
          iconClose: genIcon('layui-icon layui-icon-add-circle', isHtmlIcon),
          iconOpen: genIcon('layui-icon layui-icon-reduce-circle', isHtmlIcon),
          iconLeaf: genIcon('layui-icon layui-icon-snowflake', isHtmlIcon),
          icon: genIcon('layui-icon layui-icon-addition', isHtmlIcon),
        };

        treeTable.render({
          elem: '#MianTable',
          toolbar: '#toolbar',
          limit: 100,
          tree: {
            // customName: {
            //   id: "id",
            //   name: "id",
            // },
            view: {
              // showFlexIconIfNotParent: true,
              // flexIconClose: icons.flexIconClose,
              // flexIconOpen: icons.flexIconOpen,
              // iconClose: icons.iconClose,
              // iconOpen: icons.iconOpen,
              // iconLeaf: icons.iconLeaf,
              // icon: icons.icon
            },
          },
          cols: [
            [
              //标题栏
              { checkbox: true, fixed: 'left' },
              { field: 'id', title: 'ID', width: 150 },
              {
                title: '操作',
                width: 150,
                align: 'center',
                toolbar: '#TableItemTools',
              },
              { field: 'name', title: '用户名', width: 180, edit: 'text' },
              { field: 'sex', title: '性别', templet: '#sexTpl' },
              { field: 'province', title: '省', templet: '#provinceTpl' },
              { field: 'city', title: '市', templet: '#cityTpl' },
              { field: 'district', title: '区', templet: '#districtTpl' },
            ],
          ],
          data: [],
          done: function () {
            var options = this;

            // 获取当前行数据
            table.getRowData = (tableId, elem) => {
              var index = $(elem).closest('tr').data('index');
              return table.cache[tableId][index] || {};
            };

            var tableViewElem = this.elem.next();
            tableViewElem.off('change.tbSelect');
            tableViewElem.on('change.tbSelect', '.select-sex', function () {
              var value = this.value; // 获取选中项 value
              var data = table.getRowData(options.id, this);
              data.sex = value;

              var DATA_INDEX = data.LAY_DATA_INDEX; //此处需要内部字段更新行数据
              treeTable.updateNode('MianTable', DATA_INDEX, {
                province: '01',
              });
            });
          },
        });

        treeTable.on('toolbar(MianTable)', (obj) => {
          var id = obj.config.id;
          var checkStatus = treeTable.checkStatus(id);

          switch (obj.event) {
            case 'AddRowButton':
              treeTable.addNodes(id, {
                parentIndex: null,
                index: -1,
                //index: 0,
                data: {
                  id: Date.now(),
                  provinceList: $.extend(true, [], provinceList),
                  //  icon: 'layui-icon layui-icon-github'
                },
              });
              console.log('add', table.cache['MianTable']);

              break;

            case 'InitTableButton':
              treeTable.reloadData('MianTable', {
                data: [
                  {
                    name: 1,
                    provinceList: provinceList,
                    children: [{ name: 2, provinceList: provinceList }],
                  },
                  { name: 3, provinceList: provinceList },
                ],
              });
              break;
            case 'SubmitButton':
              console.log(treeTable.getData('MianTable'));
            case 'expandAll-true':
              treeTable.expandAll('MianTable', true);
              break;
            case 'expandAll-false':
              treeTable.expandAll('MianTable', false);
              break;
              break;
            default:
          }
        });
        treeTable.on('tool(MianTable)', (obj) => {
          var data = obj.data;
          var id = obj.config.id;
          var trElem = obj.tr;
          switch (obj.event) {
            case 'addChild': {
              const json = {
                id: Date.now(),
                provinceList: $.extend(true, [], provinceList),
              };

              treeTable.addNodes(id, {
                parentIndex: data['LAY_DATA_INDEX'],
                index: -1,
                data: json,
              });

              console.log('addChild', table.cache['MianTable']);

              break;
            }
            case 'delChild':
              // obj.del();
              // treeTable.removeNode(id, data["LAY_DATA_INDEX"]);
              treeTable.removeNode(id, trElem.attr('data-index'));
              console.log('del', table.cache['MianTable']);

              break;

            default:
          }
        });

        function normalizedIcon(iconStr) {
          return iconStr
            ? /<[^>]+?>/.test(iconStr)
              ? iconStr
              : '<i class="' + iconStr + '"></i>'
            : '';
        }
      });
    </script>
  </body>
</html>
